<template>
	<el-card class="title-card">
		<el-row>
			<!-- 头像 -->
			<el-col :span="1">
				<el-avatar :size="70" class="avatar-color"> 管理员 </el-avatar>
			</el-col>
			<!-- 祝候语 -->
			<el-col :span="18">
				<div style="margin-left:20px">
					<el-row style="margin-top:10px">
						<el-text size="large" class="greeting-font"
							>早安，管理员，祝你开心每一天！</el-text
						>
					</el-row>
					<el-row style="margin-top:30px">
						<el-text size="large" class="position-font"
							>运维工程师 |
							网宿科技－服务中心－客户业务运营部－业务支撑1队</el-text
						>
					</el-row>
				</div>
			</el-col>
			<el-col :span="5">
				<el-row>
					<el-col :span="12">
						<el-row>
							<el-text class="job-title-font">当前岗位</el-text>
						</el-row>
						<el-row>
							<el-text class="job-font">白班问处</el-text>
						</el-row>
					</el-col>
					<el-col :span="12">
						<el-row>
							<el-text class="job-title-font">次日岗位</el-text>
						</el-row>
						<el-row>
							<el-text class="job-font">中班监控</el-text>
						</el-row>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</el-card>
	<el-row class="row2">
		<el-card class="running-ticket-card">
			<el-text style="font-size:18px;margin-right:5px">进行中的工单</el-text>
			<div class="line" />

		</el-card>
		<el-card class="notice-card">
			<el-text style="font-size:18px;margin-right:5px">公告</el-text>
			<div class="line" />
		</el-card>
	</el-row>
	<el-row class="row3">
		<el-card class="performance-card">
			<el-row>
				<el-text style="font-size:18px;margin-right:5px;font-weight:600">个人绩效情况（问处）</el-text>
				<div class="line" />
				<el-text style="width:100%;margin-top:20px;font-size:15px;color:#cfcfcf;margin-right:20px">问处工单数</el-text>
				<el-row style="width:100%;margin-top:15px">
					<!-- <el-col :span="1"></el-col> -->
					<el-col :span="2">
						<span class="divStyle">{{que_num}}</span>
					</el-col>
					<el-col :span="22">
						<span >{{que_ratio}}</span>
					</el-col>
				</el-row>
			</el-row>
			<el-main>
				<div class="echart" id="mychart" :style="myChartStyle"></div>
				<!-- <div class="echart" id="mychart" style="width:100%"></div> -->
			</el-main>
			<el-table :data="question_tableData" :header-cell-style="{background:'#eef1f6',color:'#606266',textAlign:'center'}" :cell-style="{textAlign:'center'}" style="font-size: 15px;">
    			<el-table-column prop="ticket_num" label="工单数" width="180" />
    			<el-table-column prop="que_performance" label="问处绩效" width="180" />
    			<el-table-column prop="non_compliances_num" label="不达标数" />
				<el-table-column prop="compliance_rate" label="达标率" />
  			</el-table>
		</el-card>
		<el-card class="performance-card">
			<el-text style="font-size:18px;margin-right:5px">个人绩效情况（需求）</el-text>
			<div class="line" />
		</el-card>
	</el-row>
</template>

<script>
  import * as echarts from "echarts";
  
  export default {
    data() {
      return {
        myChart: {},
        myChartStyle: { float: "left", width: "100%", height: "300px" }, //图表样式
		question_tableData:[],
		duty_name:{'name':"高艺敏"},	// 绩效查询人员（当前界面的人员）
		que_num:0,
		que_ratio:'',
      };
    },
    mounted() {
      this.initEcharts();
    },
	created() {
		this.QueryQuePerFormancePerson();
		this.QueryQueNumAndRatio();
	},
    methods: {
    	async initEcharts() {
			var res = await this.$API.front_api.query_que_day_num.post(
				this.duty_name
			);
        	const option = {
          		xAxis: {
            	data: res.xData,
            	splitLine:{
                	show:false
            	},
            	axisTick:{
                	show:false
            	},
            	axisLine:{
                	show:false
            	},
            	axisLabel:{
                	show:false
            	},
          	},
          		yAxis: {
				data:res.yData,
            	splitLine:{
                	show:false
            	},
            	axisTick:{
                	show:false
            	},
            	axisLine:{
                	show:false
            	},
            	axisLabel:{
                	show:false
            	},
				grid:{
					top:'12px',
					left:'12px',
					right:'12px',
					bottom:'12px'
				}
          	},
          	series: [
            {
                data: res.yData,
                type: "line", // 类型设置为折线图
                smooth: true,
                color:'#2f97ff',
                //曲线下方阴影渐变色
                areaStyle: {
                    normal:{
                        color:{
                            type:'linear',
                            x:0,
                            y:0,
                            x2:0,
                            y2:1,
                            colorStops:[
                                {
                                    offset: 0, color: '#ffffff' // 0% 处的颜色
                                },
                                {
                                    offset: 1, color: '#75baff' // 100% 处的颜色 
                                }
                            ],
                            global: false // 缺省为 false 
                        }
                    }
                },
            }
          	]
        	};
        	this.myChart = echarts.init(document.getElementById("mychart"));
        	this.myChart.setOption(option);
      	},
		async QueryQuePerFormancePerson() {
			//个人绩效情况（问处）
			var res = await this.$API.front_api.query_que_performance_person.post(
				this.duty_name
			);
			this.question_tableData = res.data;
		},
		async QueryQueNumAndRatio(){
			//个人绩效情况（问处）--总工单数+上升比例
			var res = await this.$API.front_api.query_que_num_and_ratio_person.post(
				this.duty_name
			);
			this.que_num=res.ticketnum;
			this.que_ratio=res.ticketratio;
		},
	}
};
</script>


<style scoped>
.title-card {
	width: 100%;
	height: 15%;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 5px;
}

.row2 {
	height: 50%;
	margin-top: 7px;
	margin-left: 5px;
	margin-right: 5px;
}

.row3 {
	margin-top: 7px;
	height: 35%;
	margin-bottom: 7px;
	margin-left: 5px;
	margin-right: 5px;
}

.running-ticket-card {
	width: 60%;
}

.notice-card {
	width: 40%;
}

.performance-card {
	width: 50%;
	/* height: 35%; */
}

.avatar-color {
	background-color: #d9e8fd;
	font-size: 18px;
	/* font-weight: bold; */
	color: #000000;
	flex: 1;
}

.container {
	display: flex; /* 使用flex布局 */
}

.div-column {
	flex-direction: column;
}

.greeting-font {
	font-size: 20px;
	font-weight: 500;
}

.job-title-font{
	font-size:15px;
	color:#c0c0c0;
}

.job-font{
	font-size:25px;
	margin-top:15px;
}

.position-font{
	color:#b1b1b1;
	font-size:13px;
}

/* 横线 */
.line{
  float:right;
  width: 100%;
  height: 1px;
  margin-top: 10px;
  background:#d4c4c4;
  position: relative;
  text-align: center;
}

.line-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.divStyle{
	margin-top:15px;
	font-size:30px;
	font-weight:500;
	margin-right:30px;
}
</style>

<style scoped>
.borderNone >>> .el-input__inner {
  border: none;
}
</style>

